<template>
	<section class="container">
		<!-- 轮播图部分开始 -->
		<div id="common-banner">
			<div class="common-banner-container">
				<div class="common-banner-img">
					<img src="~/assets/images/join/business_banner.jpg">
				</div>
			</div>
		</div>
		<!-- 轮播图部分结束 -->

		<!-- The future start -->
		<div id="join_future_wrap">
			<div class="join_future_box">
				<div class="join_future_title">
					<div class="join_future_titleC">
						<h2>智领城市未来</h2>
						<h2>启拓新零售时代</h2>
					</div>
					<p class="join_future_titleE">The future of smart city and the new retail era</p>
				</div>
				<div class="join_future_add">+</div>
				<div class="join_future_desc">
					<p>2018年，卫诗理，不忘初心，为你为爱，砥砺前行</p>
				</div>
				<div class="join_future_plan">
					<p class="join_future_plan_word">筑</p>
					<p class="join_future_plan_num">18</p>
					<p class="join_future_plan_word">座梦想之城</p>
				</div>
				<div class="join_future_plan">
					<p class="join_future_plan_word">打造</p>
					<p class="join_future_plan_num">365</p>
					<p class="join_future_plan_word">个创业新星的计划正式启动</p>
				</div>
				<div class="join_future_intro">
					<p>诚邀闪耀的你，有梦想的你，有共同使命感的你，加入我们的城市合伙人之席</p>
				</div>
				<div class="join_future_people">
					<p>2018年仅30席</p>
				</div>
				<div class="join_future_introE">
					<p>In 2018, wei shi li will not forget his original intention, and will go forward for your love.</p>
					<p>To build the 18 dream cities, the plan to create 365 new stars is officially launched.</p>
					<p>You are invited to join our city partners. You have a dream, you have a common sense of purpose.</p>
				</div>
			</div>
		</div>
		<!-- The future end -->
		
		<!-- who are we start -->
		<div id="visney_intro_wrap">
			<div class="visney_intro_box">
				<div class="visney_intro_title">
					<div class="visney_intro_titleC"><h2>我们是谁</h2></div>
					<p class="visney_intro_titleE">Who are we?</p>
				</div>
				<div class="visney_intro_culture clearfix">
					<div class="visney_intro_left">
						<ul>
							<li class="visney_intro_left_list">
								<div class="visney_intro_left_title">
									<p class="visney_intro_left_titleC">品牌理念</p>
									<p class="visney_intro_left_titleE">Brand concept</p>
								</div>
								<div class="visney_intro_left_intro">
									<p>卫诗理，为了你</p>
								</div>
							</li>
							<li class="visney_intro_left_list">
								<div class="visney_intro_left_title">
									<p class="visney_intro_left_titleC">品牌定位</p>
									<p class="visney_intro_left_titleE">Brand positioning</p>
								</div>
								<div class="visney_intro_left_intro">
									<p>一个家庭的高级服务管家，一个生活的居家美学顾问</p>
								</div>
							</li>
							<li class="visney_intro_left_list">
								<div class="visney_intro_left_title">
									<p class="visney_intro_left_titleC">品牌宗旨</p>
									<p class="visney_intro_left_titleE">Brand tenet</p>
								</div>
								<div class="visney_intro_left_intro">
									<p>以家庭为主体，以孩子为中心</p>
									<p>用高质的原创设计产品，通过贵族般的生活仪式，帮助用户获得理想生活</p>
								</div>
							</li>
							<li class="visney_intro_left_list">
								<div class="visney_intro_left_title">
									<p class="visney_intro_left_titleC">品牌使命</p>
									<p class="visney_intro_left_titleE">Brand mission</p>
								</div>
								<div class="visney_intro_left_intro">
									<p>通过美学教育和生活礼仪，让孩子获得更美好的未来</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="visney_intro_logo"><img src="~/assets/images/join/new_logo.png"></div>
					<div class="visney_intro_right">
						<ul>
							<li class="visney_intro_right_list">
								<div class="visney_intro_right_title">
									<p class="visney_intro_right_titleC">品牌主张</p>
									<p class="visney_intro_right_titleE">Brand proposition</p>
								</div>
								<div class="visney_intro_right_intro">
									<p>品质、品位、仪式感</p>
								</div>
							</li>
							<li class="visney_intro_right_list">
								<div class="visney_intro_right_title">
									<p class="visney_intro_right_titleC">品牌基因</p>
									<p class="visney_intro_right_titleE">Brand gene</p>
								</div>
								<div class="visney_intro_right_intro">
									<p>礼仪、仪式感、传承、孩子</p>
								</div>
							</li>
							<li class="visney_intro_right_list">
								<div class="visney_intro_right_title">
									<p class="visney_intro_right_titleC">品牌愿景</p>
									<p class="visney_intro_right_titleE">Brand vision</p>
								</div>
								<div class="visney_intro_right_intro">
									<p>打造家居+生活一站式服务平台</p>
								</div>
							</li>
							<li class="visney_intro_right_list">
								<div class="visney_intro_right_title">
									<p class="visney_intro_right_titleC">品牌调性</p>
									<p class="visney_intro_right_titleE">Brand tonality</p>
								</div>
								<div class="visney_intro_right_intro">
									<p>赋予生活仪式感，让生活艺术化</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div class="visney_intro_details clearfix">
					<div class="visney_intro_details_left">
						<div class="visney_intro_details_title">
							<p>卫诗理，能为顾客提供的服务是</p>
						</div>
						<div class="visney_intro_details_txt">
							<p>全屋活动家具、全屋定制家具、家居用品</p>
							<p>（窗帘、床品、地毯、挂画、灯具、花艺品、生活用品等自主研发设计）、</p>
							<p>空间硬软装设计、私人活动策划定制等以提供生活品质为基础的服务需求。</p>
						</div>
					</div>
					<div class="visney_intro_details_img">
						<img src="~/assets/images/join/visney_intro_details_img.png">
					</div>
				</div>
			</div>
		</div>
		<!-- who are we end -->
		
		<!-- Who are the partners start -->
		<div id="join_partners_wrap">
			<div class="join_partners_box">
				<div class="join_partners_title">
					<div class="join_partners_titleC">
						<h2>我们要筑梦</h2>
						<h2>打造的新星是谁</h2>
					</div>
					<p class="join_partners_titleE">Who are the partners</p>
					<p class="join_partners_title_intro">要求：有经济基础、年轻、实干、符合卫诗理品牌价值观</p>
				</div>
				<div class="join_partners_banner_box">
					<span class="join_partners_banner_pre" @click="goPre"></span>
					<span class="join_partners_banner_next" @click="goNext"></span>
					<div class="join_partners_banner">
						<ul :style="{width: `${this.ulWidth}px`,marginLeft: `${this.ulMarginLeft}px`}">
							<li class="join_partners_list">
								<div class="join_partners_list_num">01</div>
								<div class="join_partners_list_title">
									<p class="join_partners_list_titleC">客户</p>
									<p class="join_partners_list_titleE">Customer</p>
								</div>
								<div class="join_partners_list_line"></div>
								<div class="join_partners_list_intro">
									<p>曾购买、热爱</p>
									<p>卫诗理家具的</p>
								</div>
							</li>
							<li class="join_partners_list">
								<div class="join_partners_list_num">02</div>
								<div class="join_partners_list_title">
									<p class="join_partners_list_titleC">实体店店主</p>
									<p class="join_partners_list_titleE">Storekeeper</p>
								</div>
								<div class="join_partners_list_line"></div>
								<div class="join_partners_list_intro">
									<p>传统家居店</p>
									<p>急需转型</p>
									<p>有创新意识的</p>
								</div>
							</li>
							<li class="join_partners_list">
								<div class="join_partners_list_num">03</div>
								<div class="join_partners_list_title">
									<p class="join_partners_list_titleC">设计师&老板</p>
									<p class="join_partners_list_titleE">Desinger & Boss</p>
								</div>
								<div class="join_partners_list_line"></div>
								<div class="join_partners_list_intro">
									<p>家装公司</p>
									<p>设计&软装公司</p>
									<p>建材行业</p>
									<p>上下游产业链的</p>
								</div>
							</li>
							<li class="join_partners_list">
								<div class="join_partners_list_num">04</div>
								<div class="join_partners_list_title">
									<p class="join_partners_list_titleC">社会精英</p>
									<p class="join_partners_list_titleE">Customer</p>
								</div>
								<div class="join_partners_list_line"></div>
								<div class="join_partners_list_intro">
									<p>拥有海量客户资源</p>
									<p>正寻找家装</p>
									<p>产业链机会的</p>
								</div>
							</li>
							<li class="join_partners_list">
								<div class="join_partners_list_num">05</div>
								<div class="join_partners_list_title">
									<p class="join_partners_list_titleC">勇闯家</p>
									<p class="join_partners_list_titleE">Entrepreneurs</p>
								</div>
								<div class="join_partners_list_line"></div>
								<div class="join_partners_list_intro">
									<p>正在寻找</p>
									<p>市场商机</p>
									<p>想创业的</p>
								</div>
							</li>
							<li class="join_partners_list">
								<div class="join_partners_list_num">06</div>
								<div class="join_partners_list_title">
									<p class="join_partners_list_titleC">异业合作伙伴</p>
									<p class="join_partners_list_titleE">Investors</p>
								</div>
								<div class="join_partners_list_line"></div>
								<div class="join_partners_list_intro">
									<p>从事各美业</p>
									<p>寻找跨界</p>
									<p>投资方向的</p>
								</div>
							</li>
							<li class="join_partners_list">
								<div class="join_partners_list_num">07</div>
								<div class="join_partners_list_title">
									<p class="join_partners_list_titleC">梦想家</p>
									<p class="join_partners_list_titleE">Dreamer</p>
								</div>
								<div class="join_partners_list_line"></div>
								<div class="join_partners_list_intro">
									<p>有共同</p>
									<p>事业理想的</p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- Who are the partners end -->
		
		<!-- What is our purpose start -->
		<div id="join_purpose_wrap">
			<div class="join_purpose_box">
				<div class="join_purpose_title_box">
					<div class="join_purpose_title">
						<div class="join_purpose_titleC">
							<h2>我们的目的</h2>
							<h2>是什么？</h2>
						</div>
						<p class="join_purpose_titleE">What is our purpose</p>
					</div>
					<div class="join_purpose_title_line"></div>
					<div class="join_purpose_title_intro">+</div>
				</div>
				<div class="join_purpose_plan">
					<p class="join_purpose_plan_word">筑</p>
					<p class="join_purpose_plan_num">18</p>
					<p class="join_purpose_plan_word">座梦想之城</p>
				</div>
				<div class="join_purpose_plan">
					<p class="join_purpose_plan_word">打造</p>
					<p class="join_purpose_plan_num">365</p>
					<p class="join_purpose_plan_word">个创业新星</p>
				</div>
				<div class="join_purpose_intro">
					<p>推进产业发展，实现品牌使命</p>
				</div>
				<div class="join_purpose_introE">
					<p>Build 18 dream cities and create 365 new stars.</p>
					<p>Promote industrial development and realize the brand mission.</p>
				</div>
				<div class="join_purpose_bg"><img src="~/assets/images/join/join_purpose_bg.png"></div>
			</div>
		</div>
		<!-- What is our purpose end -->

		<!-- join protection start -->
		<div id="join_protection_wrap">
			<div class="join_protection_box">
				<div class="join_protection_title_box clearfix">
					<div class="join_protection_img"><img src="~/assets/images/join/join_protection_img.png"></div>
					<div class="join_protection_line"></div>
					<div class="join_protection_title">
						<div class="join_protection_titleC">
							<h2>我们的核心利益</h2>
							<h2>保障是什么？</h2>
						</div>
						<p class="join_protection_titleE">What is the guarantee of our core interests</p>
					</div>
				</div>
				<div class="join_partners_intro">
					<p>承诺投资0亏损，限前<span>30</span>名城市合伙人</p>
					<p>投资资金按周期返还，最快保证<span>10</span>个月回本</p>
				</div>
				<div class="join_partners_introE">
					<p>Promise to invest 0 loss, limited to 30 city partners:</p>
					<p>The investment funds are returned by cycle, and the maximum guarantee is 10 months.</p>
				</div>
			</div>
		</div>
		<!-- join protection end -->

		<!-- join advantages start -->
		<div id="join_advantages_wrap">
			<div class="join_advantages_box">
				<div class="join_advantages_title">
					<div class="join_advantages_titleC">
						<h2>我们的优势是什么？</h2>
					</div>
					<p class="join_advantages_titleE">What are the advantages</p>
				</div>
				<div class="join_advantages_list_box">
					<ul>
						<li class="join_advantages_list">
							<div class="join_advantages_list_img"><img src="~/assets/images/join/join_advantages_list_img1.png"></div>
							<div class="join_advantages_list_desc">
								<div class="join_advantages_list_num">
									<p>01 优势一</p>
								</div>
								<div class="join_advantages_list_title">
									<p class="join_advantages_list_titleC">可服务并取得赢利的产品广、精、优</p>
									<p class="join_advantages_list_titleE">The products that can serve and make a profit are wide, fine and excellent.</p>
								</div>
								<div class="join_advantages_list_intro">
									<p>强大供应链，产品定期更新满足市场不同需求，平效超10倍利用率，融合5162多款家具单品、软装饰品、全屋定制、全屋配套（卫诗理展馆集家具、软装、全屋定制为一体，拥有12个大风格，52个系列，5162多款单品，展馆所有的产品都是在线上测试挑选出符合当地消费行为，为客户提供更为齐全的配套产品）</p>
								</div>
							</div>
						</li>
						<li class="join_advantages_list">
							<div class="join_advantages_list_img"><img src="~/assets/images/join/join_advantages_list_img2.png"></div>
							<div class="join_advantages_list_desc">
								<div class="join_advantages_list_num">
									<p>02 优势二</p>
								</div>
								<div class="join_advantages_list_title">
									<p class="join_advantages_list_titleC">开店省心、投入超值</p>
									<p class="join_advantages_list_titleE">Open a store to save the heart, invest the value.</p>
								</div>
								<div class="join_advantages_list_intro">
									<p>专业的开店前期辅助超强市场大数据以及门店设计、实施团队为您落地门店，你无需懂选品、设计，无需找专业设计人员来采购其它配套产品、摆场等繁杂工作。</p>
								</div>
							</div>
						</li>
						<li class="join_advantages_list">
							<div class="join_advantages_list_img"><img src="~/assets/images/join/join_advantages_list_img3.png"></div>
							<div class="join_advantages_list_desc">
								<div class="join_advantages_list_num">
									<p>03 优势三</p>
								</div>
								<div class="join_advantages_list_title">
									<p class="join_advantages_list_titleC">0仓库0库存、无忧安心的全国六包服务</p>
									<p class="join_advantages_list_titleE">0 warehouse 0 inventory, carefree and secure national six package service</p>
								</div>
								<div class="join_advantages_list_intro">
									<p>强大的物流、售后服务团队，全国2688个城市实现全国六包（干支装及维护，保障售后无忧，省去组建团队的成本及管理精力）</p>
								</div>
							</div>
						</li>
						<li class="join_advantages_list">
							<div class="join_advantages_list_img"><img src="~/assets/images/join/join_advantages_list_img4.png"></div>
							<div class="join_advantages_list_desc">
								<div class="join_advantages_list_num">
									<p>04 优势四</p>
								</div>
								<div class="join_advantages_list_title">
									<p class="join_advantages_list_titleC">O2O全渠道新零售体系，大数据运营支撑精准引流</p>
									<p class="join_advantages_list_titleE">O2O whole channel new retail system, big data operation support accurate drainage.</p>
								</div>
								<div class="join_advantages_list_intro">
									<p>线上行业销量7年第一（客单价高达27663（行业均值为3622），相当于行业均值的7.63倍）。天猫高端客户APASS八大合作伙伴唯一家具品牌。360度大数据全网营销，日均进客最高达10万，精准流量高转化；年3500万的品牌推广支持，高质量的品牌线上口碑及知名度。</p>
								</div>
							</div>
						</li>
						<li class="join_advantages_list">
							<div class="join_advantages_list_img"><img src="~/assets/images/join/join_advantages_list_img5.png"></div>
							<div class="join_advantages_list_desc">
								<div class="join_advantages_list_num">
									<p>05 优势五</p>
								</div>
								<div class="join_advantages_list_title">
									<p class="join_advantages_list_titleC">365天全年快节奏创意营销持续引爆</p>
									<p class="join_advantages_list_titleE">365 days of fast-paced creative marketing continues to explode.</p>
								</div>
								<div class="join_advantages_list_intro">
									<p>超强的营销策划能力，实现落地支持。</p>
								</div>
							</div>
						</li>
						<li class="join_advantages_list">
							<div class="join_advantages_list_img"><img src="~/assets/images/join/join_advantages_list_img6.png"></div>
							<div class="join_advantages_list_desc">
								<div class="join_advantages_list_num">
									<p>06 优势六</p>
								</div>
								<div class="join_advantages_list_title">
									<p class="join_advantages_list_titleC">全程专业跟踪资深管理经验培训</p>
									<p class="join_advantages_list_titleE">Professional training of senior management experience.</p>
								</div>
								<div class="join_advantages_list_intro">
									<p>让管理更加规范专业化，提升整体团队的能力与战斗力。</p>
								</div>
							</div>
						</li>
						<li class="join_advantages_list">
							<div class="join_advantages_list_img"><img src="~/assets/images/join/join_advantages_list_img7.png"></div>
							<div class="join_advantages_list_desc">
								<div class="join_advantages_list_num">
									<p>07 优势七</p>
								</div>
								<div class="join_advantages_list_title">
									<p class="join_advantages_list_titleC">开店成功案例经验</p>
									<p class="join_advantages_list_titleE">Open shop successful case experience.</p>
								</div>
								<div class="join_advantages_list_intro">
									<p>站在投资者的角度，思考开店模式，投资者获利，公司才能长久获利发展，因此，我们全方位帮助投资者盈利，做到盈利能利超出行业水平数倍。例如：</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!-- join advantages end -->

		<!-- join case start -->
		<div id="join_case_wrap">
			<div class="join_case_box">
				<div class="join_case_title">
					<p>成功案例</p>
				</div>
				<div class="join_case_table">
					<table>
						<tr>
							<th>门店</th>
							<th>开业时间</th>
							<th>面积</th>
							<th>投资金额</th>
							<th>开店业绩</th>
						</tr>
						<tr>
							<td class="join_case_table_title">广东•东莞</td>
							<td>2015年9月</td>	
							<td>2000m2独栋生态生活馆</td>
							<td>500万</td>
							<td>278万</td>
						</tr>
						<tr>
							<td class="join_case_table_title">江苏•南京</td>
							<td>2017年1月</td>	
							<td>1200m2独立专卖店</td>
							<td>480万</td>
							<td>725万</td>
						</tr>
						<tr>
							<td class="join_case_table_title">四川•成都</td>
							<td>2017年8月</td>	
							<td>2400m2独立四层生态生活馆</td>
							<td>850万</td>
							<td>1893万</td>
						</tr>
						<tr>
							<td class="join_case_table_title">内蒙古•包头</td>
							<td>2018年1月</td>	
							<td>500m2独立专卖店</td>
							<td>183万</td>
							<td>127万</td>
						</tr>
					</table>
				</div>
				<div class="join_case_img"><img src="~/assets/images/join/join_case_img.png"></div>
			</div>
		</div>
		<!-- join case end -->

		<!-- join support start -->
		<div id="join_support_wrap">
			<div class="join_support_box">
				<div class="join_support_title">
					<div class="join_support_titleC">
						<h2>我们的后端</h2>
						<h2>支持是什么？</h2>
					</div>
					<p class="join_support_titleE">What is backend support</p>
				</div>
				<div class="join_support_desc">
					<div class="join_support_desc_txtC">
						<p>首创顶配服务，领跑行业先锋，推动行业发展，提升用户体验品质</p>
					</div>
					<div class="join_support_desc_txtE">
						<p>Pioneer in top matching service, lead the industry pioneer, promote the development of the industry, </p>
						<p>improve the user experience quality.</p>
					</div>
				</div>
				<div class="join_support_future">
					<div class="join_support_contain_box">
						<transition name="join-support">
							<div class="join_support_container" v-show="0 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img0.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2010年</p></div>
									<div class="join_support_future_desc">
										<p>大件家具长途包物流</p>
										<p>创行业先河</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="1 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img1.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2011年</p></div>
									<div class="join_support_future_desc">
										<p>大件家具3包到户</p>
										<p>再领大势</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="2 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img2.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2012年</p></div>
									<div class="join_support_future_desc">
										<p>90天免仓储，45天无条件退换货</p>
										<p>远超天猫承诺的7天无理由退换</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="3 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img3.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2013年</p></div>
									<div class="join_support_future_desc">
										<p>免费快递购前寄样</p>
										<p>解决客户未见实物隐忧</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="4 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img4.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2014年</p></div>
									<div class="join_support_future_desc">
										<p>2688区域6包上门</p>
										<p>大手笔开创全网最强覆盖</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="5 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img5.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2015年</p></div>
									<div class="join_support_future_desc">
										<p>10年质保购后无忧</p>
										<p>真实力承诺</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="6 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img6.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2016年</p></div>
									<div class="join_support_future_desc">
										<p>365天最低价保障</p>
										<p>购后无忧再添保障</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="7 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img7.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2017年</p></div>
									<div class="join_support_future_desc">
										<p>全国0元飞线下</p>
										<p>大格局胸怀，无人可比</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="8 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img8.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2018年</p></div>
									<div class="join_support_future_desc">
										<p>10万方仓储基地，打通最后一公里</p>
										<p>直营体系配送终端，实实在在干实业</p>
									</div>
								</div>
							</div>
						</transition>
						<transition name="join-support">
							<div class="join_support_container" v-show="9 == num">
								<div class="join_support_future_img"><img src="~/assets/images/join/join_support_future_img9.png"></div>
								<div class="join_support_future_intro">
									<div class="join_support_future_time"><p>2019年</p></div>
									<div class="join_support_future_desc">
										<p>未来即来……</p>
										<p>卫诗理，服务与品质永不止步</p>
									</div>
								</div>
							</div>
						</transition>
					</div>
					<div class="join_support_tab">
						<ul>
							<li class="join_support_tab_list" v-for="(item,index) in supportNum" :key="index" :class=" `join_support_tab_list${index}`" @click="changeNum(index)"></li>
						</ul>
					</div>
					<div class="join_support_future_change">
						<img src="~/assets/images/join/join_support_future_change.png">
					</div>
				</div>
				<div class="join_support_show_box">
					<div class="join_support_show_title">
						<p class="join_support_show_titleC">顶级人才梯队，打造行业之颠</p>
						<p class="join_support_show_titleC">推动美学文化教育，提升用户生活品质</p>
						<p class="join_support_show_titleE">Top talent echelon, build the industry, </p>
						<p class="join_support_show_titleE">promote the aesthetic culture vteducation, </p>
						<p class="join_support_show_titleE">improve the quality of life of users.</p>
					</div>
					<div class="join_support_show_bg"><img src="~/assets/images/join/join_support_show_bg.png"></div>
					<div class="join_support_show">
						<ul>
							<li>
								<p class="join_support_showC">专享·全屋定制/软装配套</p>
								<p class="join_support_showE">whole house customization</p>
							</li>
							<li>
								<p class="join_support_showC">舒享·艺术生态生活家居体验馆</p>
								<p class="join_support_showE">whole house customization</p>
							</li>
							<li>
								<p class="join_support_showC">乐享·艺术设计研究院</p>
								<p class="join_support_showE">Art design institute</p>
							</li>
						</ul>
					</div>
					<div class="join_support_mark">+</div>
					<div class="join_support_city">
						<p class="join_support_xityC">未来之城·潮流之道</p>
						<p class="join_support_xityE">The city of the future</p>
					</div>
				</div>
			</div>
		</div>
		<!-- join support end -->

		<!-- join city start -->
		<div id="join_city_wrap">
			<div class="join_city_box">
				<div class="join_city_title">
					<div class="join_city_titleC">
						<h2>我们的合伙</h2>
						<h2>城市范围?</h2>
					</div>
					<p class="join_city_titleE">City Limits Partnership</p>
				</div>
				<div class="join_city clearfix">
					<div class="join_city_img"><img src="~/assets/images/join/join_city_img.png"></div>
					<div class="join_city_where">
						<ul>
							<li>北京市</li>
							<li>上海市</li>
							<li>重庆市</li>
							<li>天津市</li>
							<li>石家庄</li>
							<li>厦门市</li>
							<li>郑州市</li>
							<li>长沙市</li>
							<li>青岛市</li>
							<li>西安市</li>
							<li>南昌市</li>
							<li>太原市</li>
							<li>沈阳市</li>
							<li>昆明市</li>
							<li>合肥市</li>
							<li>福州市</li>
							<li>贵阳市</li>
							<li>南宁市</li>
							<li>长春市</li>
							<li>哈尔滨市</li>	
							<li>济南市</li>
							<li>温州市</li>
							<li>嘉兴市</li>
							<li>台州市</li>
							<li>湖州市</li>
							<li>宁波市</li>
							<li>金华市</li>
							<li>绍兴市</li>
							<li>徐州市</li>
							<li>南通市</li>	
							<li>扬州市</li>
							<li>苏州市</li>
							<li>无锡市</li>
							<li>镇江市</li>
							<li>大连市</li>
							<li>常州市</li>
							<li>乌鲁木齐</li>
							<li>遵义市</li>
							<li>丹东市</li>
							<li>三亚市</li>
							<li>内江市</li>
							<li>泉州市</li>
							<li>烟台市</li>
							<li>芜湖市</li>
							<li>濮阳市</li>
							<li>潍坊市</li>
							<li>上饶市</li>
							<li>泰安市</li>
							<li>吉林市</li>
							<li>淄博市</li>								
						</ul>
					</div>
				</div>
			</div>
		</div>
		<!-- join city end -->

		<!-- join requires start -->
		<div id="join_requires_wrap">
			<div class="join_requires_box">
				<div class="join_requires clearfix">
					<div class="join_requires_cont">
						<ul>
							<li class="join_requires_list">
								<div class="join_requires_list_title">开店面积要求</div>
								<div class="join_requires_list_direction"></div>
								<div class="join_requires_list_intro">
									<p>实用面积300-800m2</p>
								</div>
							</li>
							<li class="join_requires_list">
								<div class="join_requires_list_title">开店地标要求</div>
								<div class="join_requires_list_direction"></div>
								<div class="join_requires_list_intro">
									<p>连锁品牌家居卖场、家具建材临街旺铺、</p>
									<p>大型商业综合体、高档小区商铺</p>
								</div>
							</li>
							<li class="join_requires_list">
								<div class="join_requires_list_title">开店经营要求</div>
								<div class="join_requires_list_direction"></div>
								<div class="join_requires_list_intro">
									<p>做到线上线下价格统一、支付方式统一、</p>
									<p>服务标准统一、形象统一</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="join_requires_title">
						<div class="join_requires_titleC">
							<h2>我们的</h2>
							<h2>合伙要求？</h2>
						</div>
						<p class="join_requires_titleE">The partnership requires</p>
					</div>
				</div>   
				<div class="join_partnership_box">
					<div class="join_partnership_title">
						<div class="join_partnership_titleC">
							<h2>合伙流程</h2>
						</div>
						<p class="join_partnership_titleE">The partnership process</p>
					</div>
					<div class="join_partnership">
						<ul>
							<li class="join_partnership_list">了解品牌</li>
							<li class="join_partnership_list">初步洽谈</li>
							<li class="join_partnership_list">立项评测</li>
							<li class="join_partnership_list">交品牌保证金</li>
							<li class="join_partnership_list">评估报告</li>
							<li class="join_partnership_list">签订合作协议</li>
							<li class="join_partnership_list">选址</li>
							<li class="join_partnership_list">线下体验馆装修</li>
							<li class="join_partnership_list">产品选品软装配套</li>
							<li class="join_partnership_list">开业活动策划</li>
							<li class="join_partnership_list">公司团队入驻线下体验馆</li>
							<li class="join_partnership_list">产品摆场陈列</li>
							<li class="join_partnership_list">线下体验馆开业</li>
							<li class="join_partnership_list">运营团队服务跟进</li>
						</ul>
					</div>
				</div>
				
			</div>
		</div>
		<!-- join requires end -->
		
		<!-- join partner contact start -->
		<div id="partner_contact_wrap">
			<div class="partner_contact_box">
				<div class="join_contact_title">
					<div class="join_contact_titleC">
						<h2>合伙联系人</h2>
					</div>
					<p class="join_contact_titleE">Partnership contact</p>
				</div>
				<div class="join_contact_box">
					<div class="join_contact_left">
						<ul>
							<li class="join_contact_intro">联系人:大卫 David</li>
							<li class="join_contact_intro">联系方式:173 0263 3888</li>
							<li class="join_contact_intro">总部地址:深圳市宝安区固戍泰华梧桐岛11栋5-9层</li>
							<li class="join_contact_intro">体验馆地址：东莞市厚街镇家具大道209号</li>
						</ul>
					</div>
					<div class="join_contact_right">
						<div class="join_contact_code">
							<div class="join_contact_code_img">
								<img src="~/assets/images/join/join_contact_code_img.png">
							</div>
							<div class="join_contact_code_txt">
								<p>扫一扫</p>
								<p>了解更多</p>
							</div>
						</div>
						<div class="join_contact_address">
							<p>一厂地址:东莞市厚街镇双岗家具大道伟业路13号</p>
							<p>二厂地址：东莞市厚街镇白濠工业区</p>
							<p>三厂地址：东莞市厚街镇环冈第二工业区</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- join partner contact end -->
		
		<!-- join footer start -->
		<div id="join_footer_wrap">
			<div class="join_footer_box">
				<div class="join_footer_introC">
					<p>齐心共展鸿鹄志，力斩荆棘破坚冰</p>
					<p>未来不是“孤军奋战”，而是“我们在一起”</p>
					<p class="join_footer_intro_future">卫诗理，未来·已来</p>
					<p>我们的未来是星辰大海，期待你与我同行</p>
				</div>
				<div class="join_footer_introE">
					<p>Together, we will work together to break the ice.</p>
					<p>The future is not "alone," but "we are together."</p>
					<p>The future has come</p>
					<p>Our future is the sea of stars, expecting you to walk with me.</p>
				</div>
			</div>
		</div>
		<!-- join footer start -->
	</section>
</template>

<script>
	import axios from 'axios'
	export default {
		data (){
			return {
				supportNum: [0,1,2,3,4,5,6,7,8,9],
				num: 0,

				//小图列表盒子的宽度
				SmallPicListWidth: 1200,
				//小图列表li的宽度(加外边距)及长度
				liLength: 7,
				liOuterWidth: 300,

				//小图列表ul宽度
				ulWidth: 2100,

				//小图列表ul的marginleft
				ulMarginLeft: 0
			}
		},
		head () {
		  return {
		    title:this.metaData.navigationTitle,
		    meta: [
		      {name:'keywords',hid: 'keywords',content:`${this.metaData.navigationKeyword}`},
		      {name:'description',hid:'description',content:`${this.metaData.navigationDescription}`}
		    ]
		  }
		},
		async asyncData({params,store}){
		  //head信息
		    let metaData = await axios(`${store.state.wordpressAPI}/NavigationMeta/get/14`);
		  return {
		    metaData: metaData.data,
		  } 
		},
		methods: {
			changeNum (index){
				this.num = index
			},
			//下一个点击按钮
			goNext (){
			  if (this.SmallPicListWidth - this.ulMarginLeft >= this.liLength * this.liOuterWidth - (this.liLength - 1) * 8){
			    return;
			  }
			  this.ulMarginLeft = -this.liOuterWidth + this.ulMarginLeft;
			},
			//上一个点击按钮
			goPre (){
			  if (this.ulMarginLeft > -this.liOuterWidth) {
			    this.ulMarginLeft = 0;
			    return;
			  } else {
			    this.ulMarginLeft = this.ulMarginLeft + this.liOuterWidth;
			  }
			}
		}
	}
</script>

<style scoped>
	#common-banner {
	    position: relative;
	    overflow: hidden;
	    width: 100%;
	    height: 600px;
	}

	.marginTop{
	    margin-top: 173px;
	}

	.common-banner-container {
	    position: relative;
	    width: 1200px;
	    height: 100%;
	    margin: 0 auto;
	}

	.common-banner-img {
	    position: absolute;
	    top: 0;
	    left: 50%;
	    overflow: hidden;
	    width: 1920px;
	    height: 100%;
	    margin-left: -960px;
	}
	/*The future start*/
		div#join_future_wrap {
		    width:  100%;
		    height:  auto;
		}

		.join_future_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding: 150px 0;
		}

		.join_future_title {
		    width:  100%;
		    height:  auto;
		    text-align:  center;
		}

		.join_future_titleC {
		    overflow:  hidden;
		    width:  100%;
		    height: 92px;
		    text-align:  center;
		}

		.join_future_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.join_future_titleE {
		    overflow:  hidden;
		    width:  100%;
		    height: 32px;
		    color:  #858585;
		    font-size:  14px;
		    line-height: 32px;
		    text-align:  center;
		}

		.join_future_add {
		    width:  100%;
		    height:  160px;
		    color:  #000;
		    font-size: 32px;
		    font-weight:  bold;
		    text-align:  center;
		    line-height: 160px;
		}

		.join_future_desc {
		    overflow:  hidden;
		    width:  100%;
		    height:  50px;
		    color:  #858585;
		    font-size:  18px;
		    text-align:  center;
		    line-height:  50px;
		}

		.join_future_plan {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding: 23px 0 40px;
		    color:  #858585;
		    font-size:  18px;
		    line-height:  28px;
		    text-align:  center;
		}

		p.join_future_plan_num {
		    color:  #22202b;
		    font-size:  48px;
		    font-weight:  bold;
		    line-height: 58px;
		}

		.join_future_intro {
		    overflow: hidden;
		    width: 100%;
		    height: 28px;
		    color: #858585;
		    font-size: 18px;
		    text-align: center;
		    line-height: 28px;
		}

		.join_future_people {
		    overflow:  hidden;
		    width:  193px;
		    height:  40px;
		    margin: 40px auto;
		    border:  3px solid #000;
		    box-sizing:  border-box;
		    color:  #22202b;
		    font-size:  14px;
		    line-height:  34px;
		    text-align:  center;
		}

		.join_future_introE {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    color:  #d6d6d6;
		    font-size:  12px;
		    line-height:  16px;
		    text-align:  center;
		}
	/*The future end*/
	/*who are we start*/
		div#visney_intro_wrap {
		    width: 100%;
		    height: auto;
		    background: #f9f9fa;
		}

		.visney_intro_box {
		    overflow: hidden;
		    width: 1200px;
		    height: auto;
		    margin: 0 auto;
		    padding: 150px 0;
		}

		.visney_intro_title {
		    width: 100%;
		    height: auto;
		    text-align: center;
		    padding-bottom:  67px;
		    border-bottom: 2px solid #d0d0d4;
		}

		.visney_intro_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 46px;
		    text-align: center;
		}

		.visney_intro_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.visney_intro_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 32px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 32px;
		    text-align: center;
		}

		.visney_intro_culture {
		    width: 100%;
		    height: auto;
		    padding: 105px 0 100px;
		    border-bottom: 2px solid #d0d0d4;
		}

		.visney_intro_left {
		    float:  left;
		    width: 500px;
		}

		.visney_intro_logo {
		    float:  left;
		    width: 200px;
		    margin-top: 132px;
		    text-align:  center;
		}

		.visney_intro_right {
		    float:  right;
		    width: 500px;
		}

		li.visney_intro_left_list {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-bottom: 50px;
		}

		.visney_intro_left_title {
		    width:  100%;
		    height:  auto;
		}

		p.visney_intro_left_titleC {
		    overflow:  hidden;
		    width: 100%;
		    height:  auto;
		    color:  #22202f;
		    font-size: 23px;
		    font-weight:  bold;
		    line-height:  28px;
		    text-align:  left;
		}

		p.visney_intro_left_titleE {
		    width:  100%;
		    height: 18px;
		    color:  #858585;
		    font-size:  14px;
		    line-height:  18px;
		    text-align:  left;
		}

		.visney_intro_left_intro {
		    overflow:  hidden;
		    width: 100%;
		    height:  auto;
		    padding-top:  17px;
		    color:  #858585;
		    font-size:  14px;
		    line-height: 18px;
		    text-align:  left;
		}

		li.visney_intro_right_list {
		    overflow: hidden;
		    width: 100%;
		    height: auto;
		    padding-bottom: 50px;
		}

		.visney_intro_right_title {
		    width: 100%;
		    height: auto;
		}

		p.visney_intro_right_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: auto;
		    color: #22202f;
		    font-size: 23px;
		    font-weight: bold;
		    line-height: 28px;
		    text-align: right;
		}

		p.visney_intro_right_titleE {
		    width: 100%;
		    height: 18px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 18px;
		    text-align: right;
		}

		.visney_intro_right_intro {
		    overflow: hidden;
		    width: 100%;
		    height: auto;
		    padding-top: 17px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 18px;
		    text-align: right;
		}

		.visney_intro_right_list_mark {
		    width: 100%;
		    height: auto;
		    padding-top: 60px;
		    color: #000;
		    font-size: 28px;
		    font-weight: bold;
		    text-align: right;
		    line-height: 30px;
		}

		.visney_intro_details {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-top: 94px;
		}

		.visney_intro_details_left {
		    float:  left;
		    width:  600px;
		    height:  auto;
		}

		.visney_intro_details_img {
		    float:  right;
		    overflow:  hidden;
		    width: 424px;
		    height: 242px;
		}

		.visney_intro_details_img img {
		    width:  100%;
		    height:  100%;
		}

		.visney_intro_details_title {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding: 55px 0 32px;
		    color:  #22202b;
		    font-size:  24px;
		    font-weight:  bold;
		    line-height:  44px;
		    text-align:  left;
		}

		.visney_intro_details_txt {
		    width:  100%;
		    height:  auto;
		    color:  #858585;
		    font-size:  14px;
		    line-height:  26px;
		    text-align:  left;
		}
	/*who are we end*/

	/*Who are the partners start*/
		div#join_partners_wrap {
		    width:  100%;
		    height:  auto;
		}

		.join_partners_box {
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding: 150px 0;
		}

		.join_partners_title {
		    width: 100%;
		    height: auto;
		    padding-bottom: 70px;
		    text-align: center;
		}

		.join_partners_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 92px;
		    text-align: center;
		}

		.join_partners_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.join_partners_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 50px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 50px;
		    text-align: center;
		}

		p.join_partners_title_intro {
		    overflow: hidden;
		    width: 100%;
		    color: #858585;
		    font-size: 14px;
		    line-height: 24px;
		    text-align: center;
		}

		.join_partners_banner_box {
		    position:  relative;
		    width:  1200px;
		    height: auto;
		}

		.join_partners_banner {
		    overflow:  hidden;
		    width:  1200px;
		    height: 340px;
		}

		.join_partners_banner ul {
		    overflow:  hidden;
		}

		li.join_partners_list {
		    float:  left;
		    width:  300px;
		    height:  340px;
		    border: 4px solid transparent;
		    box-sizing:  border-box;
		    text-align: center;
		    cursor:  pointer;
		    -webkit-transition: all 0.5s ease;
		    -o-transition: all 0.5s ease;
		    transition: all 0.5s ease;
		}

		li.join_partners_list:hover {
		    border: 4px solid #22202b;
		}

		.join_partners_list_num {
		    width:  100%;
		    height:  auto;
		    padding-top: 16px;
		    color:  #22202b;
		    font-size:  60px;
		    font-weight:  bold;
		    line-height:  84px;
		    text-align:  center;
		}

		.join_partners_list_title {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		}

		p.join_partners_list_titleC {
		    width:  100%;
		    height:  28px;
		    color:  #22202b;
		    font-size:  22px;
		    font-weight:  bold;
		    line-height:  28px;
		    text-align:  center;
		}

		p.join_partners_list_titleE {
		    overflow:  hidden;
		    width:  100%;
		    height:  20px;
		    color:  #858585;
		    font-size:  12px;
		    line-height:  20px;
		    text-align:  center;
		}

		.join_partners_list_line {
		    width:  54px;
		    height:  2px;
		    margin: 35px auto;
		    background: #d5d5d8;
		}

		.join_partners_list_intro {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    color:  #858585;
		    font-size:  14px;
		    line-height:  24px;
		    text-align:  center;
		}

		.join_partners_banner_pre {
		    position:  absolute;
		    top: 50%;
		    left: -56px;
		    width:  18px;
		    height: 40px;
		    margin-top: -20px;
		    background: url(~/assets/images/join/join_partners_banner_pre.png) center center no-repeat;
		    cursor:  pointer;
		    z-index: 9;
		}

		.join_partners_banner_next {
		    position: absolute;
		    top: 50%;
		    right: -56px;
		    width: 18px;
		    height: 40px;
		    margin-top: -20px;
		    background: url(~/assets/images/join/join_partners_banner_next.png) center center no-repeat;
		    cursor: pointer;
		}

		.join_partners_banner_pre:hover{
		    background: url(~/assets/images/products/banner-btn-pre-cur.png) center center no-repeat;
		}

		.join_partners_banner_next:hover{
		    background: url(~/assets/images/products/banner-btn-next-cur.png) center center no-repeat;
		}
	/*Who are the partners end*/

	/*What is our purpose start*/
		div#join_purpose_wrap {
		    width:  100%;
		    height:  auto;
		}

		.join_purpose_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding: 150px 0;
		}

		.join_purpose_title_box {
		    overflow:  hidden;
		    width:  100%;
		    padding-bottom: 100px;
		}

		.join_purpose_title {
		    float:  left;
		}

		.join_purpose_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 92px;
		    text-align: left;
		}

		.join_purpose_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.join_purpose_titleE {
		    overflow:  hidden;
		    width:  100%;
		    height:  34px;
		    color: #858585;
		    font-size: 14px;
		    line-height:  34px;
		    text-align:  left;
		}

		.join_purpose_title_line {
		    float:  left;
		    width:  880px;
		    height:  2px;
		    margin: 55px 40px 0;
		    background:  #d5d5d8;
		}

		.join_purpose_title_intro {
		    float:  right;
		    color: #22202b;
		    font-size: 32px;
		    font-weight:  bold;
		    line-height: 100px;
		    text-align:  center;
		}

		.join_purpose_plan {
		    overflow: hidden;
		    width: 100%;
		    height: auto;
		    padding: 23px 0 40px;
		    color: #858585;
		    font-size: 18px;
		    line-height: 28px;
		    text-align: center;
		}

		p.join_purpose_plan_num {
		    color: #22202b;
		    font-size: 48px;
		    font-weight: bold;
		    line-height: 58px;
		}

		.join_purpose_intro {
		    overflow: hidden;
		    width: 100%;
		    height: auto;
		    padding-top: 50px;
		    color: #858585;
		    font-size: 18px;
		    line-height: 28px;
		    text-align: center;
		}

		.join_purpose_introE {
		    width:  100%;
		    height:  auto;
		    padding-top:  15px;
		    color:  #d6d6d6;
		    font-size:  12px;
		    line-height:  14px;
		    text-align:  center;
		}

		.join_purpose_bg {
		    overflow:  hidden;
		    width:  100%;
		    height: 204px;
		    padding-top:  150px;
		}
	/*What is our purpose end*/

	/*join protection start*/
		div#join_protection_wrap {
		    width:  100%;
		    height:  auto;
		    background:  #f9f9fa;
		}

		.join_protection_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding: 150px 0;
		}

		.join_protection_title_box {
		    overflow:  hidden;
		    width:  100%;
		}

		.join_protection_img {
		    float:  left;
		    overflow:  hidden;
		    width:  409px;
		    height:  117px;
		}

		.join_protection_line {
		    float:  left;
		    width:  170px;
		    height:  2px;
		    margin: 60px 0 0 160px;
		    background: #d5d5d8;
		}

		.join_protection_title {
		    float:  right;
		}

		.join_protection_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 92px;
		    text-align: right;
		}

		.join_protection_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.join_protection_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 34px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 34px;
		    text-align: right;
		}

		.join_partners_introE {
		    width: 100%;
		    height: auto;
		    padding-top: 15px;
		    color: #d6d6d6;
		    font-size: 12px;
		    line-height: 14px;
		    text-align: center;
		}

		.join_partners_intro {
		    overflow:  hidden;
		    width:  100%;
		    height: auto;
		    padding-top: 100px;
		    color:  #858585;
		    font-size:  18px;
		    line-height:  80px;
		    text-align:  center;
		}

		.join_partners_intro span {
		    color:  #22202b;
		    font-size:  48px;
		    font-weight:  bold;
		}
	/*join protection end*/
	/*join advantages start*/
		div#join_advantages_wrap {
		    width:  100%;
		    height:  auto;
		}

		.join_advantages_box {
		    overflow:  hidden;
		    width:  1200px;
		    margin:  0 auto;
		    padding: 150px 0 77px;
		}

		.join_advantages_title {
		    width: 100%;
		    height: auto;
		    text-align: center;
		    padding-bottom: 70px;
		}

		.join_advantages_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 46px;
		    text-align: center;
		}

		.join_advantages_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.join_advantages_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 32px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 32px;
		    text-align: center;
		}

		.join_advantages_list_box {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		}

		.join_advantages_list_box ul {
		    width:  100%;
		}

		li.join_advantages_list {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding: 75px 0;
		    border-top: 2px solid #eae9eb;
		    box-sizing: border-box;
		}

		.join_advantages_list_box ul li:first-child {
		    border-top: none;
		}

		.join_advantages_list_img {
		    overflow:  hidden;
		    width: 504px;
		    height: 228px;
		}

		.join_advantages_list_desc {
		    overflow:  hidden;
		    width:  600px;
		    height:  auto;
		    box-sizing:  border-box;
		}

		.join_advantages_list_num {
		    overflow:  hidden;
		    width:  163px;
		    height:  40px;
		    margin-top:  10px;
		    border: 3px solid #000;
		    box-sizing:  border-box;
		    color:  #22202b;
		    font-size:  18px;
		    font-weight:  bold;
		    line-height:  34px;
		    text-align:  center;
		}

		.join_advantages_list_title {
		    overflow:  hidden;
		    width:  100%;
		    padding: 30px 0 13px;
		}

		p.join_advantages_list_titleC {
		    overflow:  hidden;
		    width:  100%;
		    height:  34px;
		    color:  #22202b;
		    font-size: 24px;
		    font-weight:  bold;
		    line-height: 34px;
		}

		p.join_advantages_list_titleE {
		    overflow:  hidden;
		    width:  100%;
		    height: 20px;
		    color:  #ccc;
		    font-size:  12px;
		    line-height:  20px;
		    text-align:  left;
		}

		.join_advantages_list_intro {
		    overflow:  hidden;
		    width: 100%;
		    height:  auto;
		    color:  #858585;
		    font-size:  14px;
		    line-height:  18px;
		    text-align:  left;
		}

		.join_advantages_list_box ul li:nth-child(2n+1) .join_advantages_list_img {
		    float:  right;
		}

		.join_advantages_list_box ul li:nth-child(2n+1) .join_advantages_list_desc {
		    float:  left;
		    padding-right: 55px;
		}

		.join_advantages_list_box ul li:nth-child(2n) .join_advantages_list_img {
		    float:  left;
		}

		.join_advantages_list_box ul li:nth-child(2n) .join_advantages_list_desc {
		    float:  right;
		    padding-left:  55px;
		}
	/*join advantages end*/
	/*join case start*/
		div#join_case_wrap {
		    width:  100%;
		    background: #f9f9fa;
		}

		.join_case_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding-top:  65px;
		}

		.join_case_title {
		    width:  100%;
		    height:  85px;
		    color: #22202b;
		    font-size:  23px;
		    font-weight:  bold;
		    line-height:  85px;
		    text-align:  center;
		}

		.join_case_table {
		    width:  100%;
		    height:  auto;
		}

		.join_case_table table {
		    width:  100%;
		    height:  auto;
		}

		.join_case_table table tr {width:  100%;height: 67px;color:  #22202b;font-size:  20px;line-height:  67px;text-align:  center;}

		.join_case_table table tr th {
		    height: 77px;
		    color: #22202b;
		    font-size: 20px;
		    font-weight: bold;
		    line-height: 77px;
		    text-align: center;
		    border: 3px solid #000;
		}

		.join_case_table table tr td {
		    border: 3px solid #000;
		}

		.join_case_table table tr td.join_case_table_title {
		    color:  #22202b;
		    font-size:  20px;
		    font-weight:  bold;
		}

		.join_case_img {
		    overflow:  hidden;
		    width:  100%;
		    height: 773px;
		    padding-top:  54px;
		}
	/*join case end*/

	/*join support start*/
		div#join_support_wrap {
		    width:  100%;
		}

		.join_support_box {
		    overflow:  hidden;
		    width: 100%;
		    min-width: 1200px;
		    margin:  0 auto;
		    padding: 150px 0;
		}

		.join_support_title {
		    width: 1200px;
		    height: auto;
		    margin:  0 auto;
		    text-align: center;
		    padding-bottom: 56px;
		}

		.join_support_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 92px;
		    text-align: center;
		}

		.join_support_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.join_support_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 46px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 46px;
		    text-align: center;
		}

		.join_support_desc {
		    overflow:  hidden;
		    width:  100%;
		    height: 352px;
		    min-width:  1200px;
		    margin:  0 auto;
		    text-align:  center;
		    background:  url(~/assets/images/join/join_support_desc_bg.png) center no-repeat;
		}

		.join_support_desc_txtC {
		    overflow:  hidden;
		    width:  100%;
		    height:  46px;
		    margin-top: 154px;
		    color:  #f5e2b7;
		    font-size:  24px;
		    line-height:  46px;
		    text-align:  center;
		}

		.join_support_desc_txtE {
		    overflow:  hidden;
		    width:  100%;
		    color:  #f5e2b7;
		    font-size:  12px;
		    line-height:  16px;
		    text-align:  center;
		}

		.join_support_future {
		    position:  relative;
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		}

		.join_support_future_img {
		    position:  absolute;
		    top: 150px;
		    left: 294px;
		    overflow:  hidden;
		    width:  268px;
		    height:  268px;
		    border-radius:  50%;
		    z-index: 66;
		}

		.join_support_future_change {
		    overflow:  hidden;
		    width:  100%;
		    height: 300px;
		    padding-top: 696px;
		}
		
		.join_support_contain_box {
		    position:  absolute;
		    top: 0;
		    left: 0;
		    width:  100%;
		    height: 690px;
		}

		.join-support-enter-active, .join-support-leave-active {
			transition: opacity .5s;
		}
		.join-support-enter, .join-support-leave-to
		{
			opacity: 0;
		}

		.join_support_container {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		}

		.join_support_tab {
		    position:  absolute;
		    left:  0;
		    bottom: 0;
		}

		li.join_support_tab_list {
		    position:  absolute;
		    width: 18px;
		    height: 18px;
		    background: transparent;
		    border-radius: 50%;
		    cursor: pointer;
		}

		.join_support_tab_list0 {
		    left: 60px;
		    bottom: 50px;
		}
		.join_support_tab_list1 {
		    left: 148px;
		    bottom: 167px;
		}
		.join_support_tab_list2 {
		    left: 233px;
		    bottom: 111px;
		}
		.join_support_tab_list3 {
		    left: 333px;
		    bottom: 252px;
		}
		.join_support_tab_list4 {
		    left: 490px;
		    bottom: 35px;
		}
		.join_support_tab_list5 {
		    left: 585px;
		    bottom: 134px;
		}
		.join_support_tab_list6 {
		    left: 691px;
		    bottom: 37px;
		}
		.join_support_tab_list7 {
		    left: 831px;
		    bottom: 218px;
		}
		.join_support_tab_list8 {
		    left: 954px;
		    bottom: 63px;
		}
		.join_support_tab_list9 {
		    left: 1083px;
		    bottom: 252px;
		}


		.join_support_future_intro {
		    position:  absolute;
		    top: 200px;
		    left: 407px;
		    overflow:  hidden;
		    width:  467px;
		    height: 467px;
		    border: 42px solid #f4f4f4;
		    background: #22202b;
		    border-radius: 50%;
		    box-sizing:  border-box;
		}

		.join_support_future_time {
		    overflow:  hidden;
		    width:  112px;
		    height:  30px;
		    margin: 172px auto 0;
		    border: 2px solid #feeabd;
		    box-sizing:  border-box;
		    color:  #feeabd;
		    font-size:  18px;
		    line-height:  26px;
		    text-align:  center;
		}

		.join_support_future_desc {
		    overflow:  hidden;
		    width:  90%;
		    height:  auto;
		    margin:  0 auto;
		    padding-top: 16px;
		    color:  #feeabd;
		    font-size:  18px;
		    line-height:  24px;
		    text-align:  center;
		}

		.join_support_show_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding-top: 186px;
		}

		.join_support_show_title {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-bottom: 65px;
		    text-align:  center;
		}

		p.join_support_show_titleC {
		    overflow:  hidden;
		    width:  100%;
		    height:  30px;
		    color:  #22202f;
		    font-size: 24px;
		    font-weight:  bold;
		    line-height:  30px;
		    text-align:  center;
		}

		p.join_support_show_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 16px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 16px;
		    text-align: center;
		}

		.join_support_show_title p:nth-child(3) {
		    margin-top: 10px;
		}

		.join_support_show_bg {
		    overflow:  hidden;
		    width:  100%;
		    height: 204px;
		}

		.join_support_show_bg img {
		    width:  100%;
		    height:  100%;
		}

		.join_support_show {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-top: 80px;
		}

		.join_support_show ul {
		    overflow:  hidden;
		}

		.join_support_show ul li {
		    float:  left;
		    overflow:  hidden;
		    width:  400px;
		    height:  auto;
		    text-align:  center;
		}

		p.join_support_showC {
		    overflow:  hidden;
		    width:  100%;
		    height:  30px;
		    color:  #22202b;
		    font-size:  18px;
		    font-weight:  bold;
		    line-height:  30px;
		    text-align:  center;
		}

		p.join_support_showE {
		    overflow:  hidden;
		    width:  100%;
		    height:  20px;
		    color:  #858585;
		    font-size:  12px;
		    line-height:  20px;
		    text-align:  center;
		}

		.join_support_mark {
		    width:  100%;
		    height:  107px;
		    color:  #22202b;
		    font-size: 36px;
		    font-weight:  bold;
		    line-height: 120px;
		    text-align:  center;
		}

		.join_support_city {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    text-align:  center;
		}

		p.join_support_xityC {
		    overflow:  hidden;
		    width:  100%;
		    height:  28px;
		    color: #000000;
		    font-size:  18px;
		    font-weight: 500;
		    line-height:  28px;
		    text-align:  center;
		}

		p.join_support_xityE {
		    overflow: hidden;
		    width: 100%;
		    height: 22px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 22px;
		    text-align: center;
		}
	/*join support end*/

	/*join city start*/
		div#join_city_wrap {
		    width:  100%;
		    height:  auto;
		    background: #f9f9fa;
		}

		.join_city_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding: 150px 0 185px;
		}

		.join_city_title {
		    width: 1200px;
		    height: auto;
		    margin: 0 auto;
		    text-align: center;
		    padding-bottom: 123px;
		}

		.join_city_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 92px;
		    text-align: center;
		}

		.join_city_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.join_city_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 46px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 46px;
		    text-align: center;
		}

		.join_city {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		}

		.join_city_img {
		    float:  left;
		    overflow: hidden;
		    width:  540px;
		    height:  447px;
		    margin-left: 68px;
		}

		.join_city_where {
		    float:  right;
		    overflow:  hidden;
		    width:  490px;
		    height:  auto;
		    padding: 68px 70px 10px;
		    box-sizing:  border-box;
		}

		.join_city_where ul {
		    overflow:  hidden;
		}

		.join_city_where ul li {
		    float:  left;
		    overflow:  hidden;
		    width: 70px;
		    height: 32px;
		    color:  #7a7a7a;
		    font-size:  14px;
		    line-height:  32px;
		    text-align:  center;
		}
	/*join city end*/

	/*join requires start*/
		div#join_requires_wrap {
		    width:  100%;
		    height:  auto;
		}

		.join_requires_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin: 0 auto;
		    padding: 150px 0 150px;
		}

		.join_requires {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-bottom: 150px;
		}

		.join_requires_cont {
		    float:  left;
		    overflow:  hidden;
		    width:  620px;
		    height:  auto;
		}

		.join_requires_cont ul {
		    overflow:  hidden;
		    width:  100%;
		}

		li.join_requires_list {
		    position:  relative;
		    overflow:  hidden;
		    width:  100%;
		    height: 140px;
		    padding-top: 35px;
		    border-bottom: 1px solid #d5d5d8;
		    box-sizing:  border-box;
		}

		.join_requires_list_title {
		    float:  left;
		    width:  213px;
		    height:  63px;
		    padding-left:  20px;
		    background: #22202b;
		    box-sizing:  border-box;
		    color:  #feeabd;
		    font-size:  20px;
		    line-height:  63px;
		    text-align:  left;
		}

		.join_requires_list_intro {
		    float:  left;
		    max-width:  345px;
		    margin-top: 15px;
		    margin-left: 60px;
		    color:  #858585;
		    font-size:  14px;
		    line-height: 18px;
		    text-align:  left;
		}

		.join_requires_list_direction {
		    position:  absolute;
		    top: 35px;
		    left: 213px;
		    width: 0;
		    height: 0;
		    border-top: 31px solid transparent;
		    border-right: 37px solid transparent;
		    border-bottom: 32px solid transparent;
		    border-left: 37px solid #22202b;
		}

		.join_requires_title {
		    float:  right;
		    height: auto;
		    margin: 140px auto 0;
		    text-align: center;
		}

		.join_requires_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 92px;
		    text-align: center;
		}

		.join_requires_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 46px;
		}

		p.join_requires_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 46px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 46px;
		    text-align: center;
		}

		.join_requires_title {
		    float:  right;
		    height: auto;
		    margin: 140px auto 0;
		    text-align: center;
		}

		p.join_requires_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 72px;
		    text-align: center;
		}

		p.join_requires_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 46px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 46px;
		    text-align: center;
		}

		.join_partnership_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  550px;
		    background:  #22202b;
		}

		.join_partnership_title {
		    width:  100%;
		    height:  auto;
		    padding: 75px 0;
		    text-align:  center;
		}

		.join_partnership_titleC {
		    overflow:  hidden;
		    width:  100%;
		    height: 38px;
		    text-align:  center;
		}

		.join_partnership_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #feeabd;
			line-height: 38px;
		}

		p.join_partnership_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 32px;
		    color: #feeabd;
		    font-size: 14px;
		    line-height: 32px;
		    text-align: center;
		}

		.join_partnership {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		}

		.join_partnership ul {
		    overflow:  hidden;
		}

		li.join_partnership_list {
		    float:  left;
		    overflow:  hidden;
		    width:  300px;
		    height: 60px;
		    padding-left:  95px;
		    box-sizing:  border-box;
		    background: url(~/assets/images/join/join_partnership_list.png) 20% center no-repeat;
		    color:  #feeabd;
		    font-size:  18px;
		    line-height:  60px;
		    text-align:  left;
		}
	/*join requires end*/

	/*join partner contact start*/
		div#partner_contact_wrap {
		    width:  100%;
		    height:  auto;
		    background:  #f9f9fa;
		}

		.partner_contact_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  auto;
		    margin:  0 auto;
		    padding: 150px 0;
		}

		.join_contact_title {
		    width: 1200px;
		    height: auto;
		    margin: 0 auto;
		    text-align: center;
		    padding-bottom:  140px;
		}

		.join_contact_titleC {
		    overflow: hidden;
		    width: 100%;
		    height: 38px;
		    text-align: center;
		}

		.join_contact_titleC h2 {
			font-size:  38px;
			font-family: 'Noto Serif CJK SC', 'Source Han Serif SC', 'Source Han Serif', 'source-han-serif-sc','STZhongsong','宋体', 'serif';
			font-weight: 900;
			color: #22202b;
			line-height: 38px;
		}

		p.join_contact_titleE {
		    overflow: hidden;
		    width: 100%;
		    height: 40px;
		    color: #858585;
		    font-size: 14px;
		    line-height: 40px;
		    text-align: center;
		}

		.join_contact_box {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		}

		.join_contact_left {
		    float:  left;
		    overflow:  hidden;
		    width:  600px;
		    height:  auto;
		}

		.join_contact_left ul {
		    overflow:  hidden;
		    width:  100%;
		}

		li.join_contact_intro {
		    overflow:  hidden;
		    width:  100%;
		    height:  59px;
		    border-bottom: 1px solid #d9d9dc;
		    box-sizing:  border-box;
		    color:  #55545f;
		    font-size:  14px;
		    line-height:  58px;
		    text-align:  left;
		}

		.join_contact_right {
		    float:  right;
		    overflow:  hidden;
		    width:  320px;
		    height:  auto;
		    margin-right: 70px;
		}

		.join_contact_code {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		}

		.join_contact_code_img {
		    float: left;
		    overflow:  hidden;
		    width:  98px;
		    height:  98px;
		}

		.join_contact_code_img img {
		    width:  100%;
		    height:  100%;
		}

		.join_contact_code_txt {
		    float:  left;
		    padding-top: 30px;
		    padding-left: 5px;
		    color:  #55545f;
		    font-size:  14px;
		    line-height:  20px;
		    text-align:  left;
		}

		.join_contact_address {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-top: 18px;
		    color:  #55545f;
		    font-size:  14px;
		    line-height:  30px;
		    text-align:  left;
		}
	/*join partner contact end*/

	/*join footer start*/
		div#join_footer_wrap {
		    overflow:  hidden;
		    width:  100%;
		    height:  601px;
		    background:  url(~/assets/images/join/join_footer_wrap_bg.png) center center no-repeat;
		}

		.join_footer_box {
		    overflow:  hidden;
		    width:  1200px;
		    height:  100%;
		    margin:  0 auto;
		}

		.join_footer_introC {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-top:  145px;
		    color:  #fff;
		    font-size:  18px;
		    line-height:  30px;
		    text-align: center;
		}

		p.join_footer_intro_future {
		    width:  100%;
		    height:  90px;
		    color:  #feeabd;
		    line-height: 90px;
		}

		.join_footer_introE {
		    overflow:  hidden;
		    width:  100%;
		    height:  auto;
		    padding-top:  65px;
		    color: #565d6b;
		    font-size:  14px;
		    line-height:  16px;
		    text-align:  center;
		}
	/*join footer end*/
</style>